<!-- 注册
 1. vue始终在用双向绑定的思想来准备前后端交互，每一个vue都会定义好变量给 表单（form）或者表格（table）中的html元素的值绑定
-->
<template>
  <div><!-- element组件库的Dialog对话框默认可以通过点击 modal 关闭 Dialog，即点击空白处弹框可关闭。 -->
    <!-- :visible.sync 子组键改变父组件的值 控制子组件的显示-->
    <el-dialog title="哈喽" :visible.sync="addDialogIsShow" :before-close="handleClose" :close-on-click-modal="false">
    <el-form  :model="supplierOrder" label-width="80px" :rules="addSupplierOrderRules" ref="addSupplierOrderForm">
      <el-form-item label="蔬菜供应商编号" prop="suno">
        <el-col :span="8">
          <el-input v-model="supplierOrder.suno"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="用户编号" prop="uno">
        <el-col :span="8">
          <el-input v-model="supplierOrder.uno"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="账单金额" prop="usprice">
        <el-col :span="8">
          <el-input v-model="supplierOrder.usprice"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="订单时间">
        <el-col class="line" :span="1">-</el-col>
        <el-col :span="8">
          <el-time-picker placeholder="选择时间" v-model="supplierOrder.usTime"
                          style="width: 200px;"></el-time-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="订单日期">
        <el-col :span="8">
          <el-date-picker type="date" placeholder="选择日期" v-model="supplierOrder.usDate"
                          style="width: 250px;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="1">-</el-col>
      </el-form-item>
    </el-form>
    <span>
      <el-button type="success" @click="addSupplierOrder('addSupplierOrderForm')">注册</el-button>
    </span>
    </el-dialog>
  </div>
</template>
<script>
import api from "../../../../axios/api"
import rules from "../../../../static/js/validator/rules.js"

    export default {
      name: "addSupplierOrder",
      data(){
        return {supplierOrder:{uno:"",suno:"",usprice:"",usTime:"",usDate:""},
          addDialogIsShow: false,
          addSupplierOrderRules:{uno:[{required:true,message:"用户编号不能为空",trigger:'blur'}],
            suno:[{required:true,message:"蔬菜供应商编号不能为空",trigger:'blur'},{ pattern:/^\d+$|^\d+[.]?\d+$/,message:'编号必须为数字',trigger:'blur'}],
            usprice:[{required:true,message:"账单金额不能为空",trigger:'blur'}]
          }
        }
      },
      methods: {
        addSupplierOrder:function(addSupplierOrderForm){
          this.$refs[addSupplierOrderForm].validate(valid => {//此处refs对象和标签上的ref对应
            if (valid) {
              //如果通过验证 to do...
              this.setDataFromAxios();
              alert(this.supplierOrder.usno+"添加成功");
              //this.setDataFromAxios();
              this.handleClose();
            } else {
              console.log('error submit!!')
              return false
            }
          })},
        //页面初始化时加载的事件
        init() {
          this.addDialogIsShow = true;
        },
        //关闭页面
        handleClose() {
          this.addDialogIsShow = false;
          //给父组件传参
          this.$emit("addDialogIsShow", this.addDialogIsShow);
        },
        setDataFromAxios:function(){
          alert(this.$store.state.host);
          console.log(this.supplierOrder);
          //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
          api.setDataFromAxios(this.$store.state.host+"supplierorderController/addSupplierorder",this.supplierOrder,"post")
            .then(res=>{
              this.leagues = res.leagues});//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
        },
      },

      //监听
      watch: {
        dialogisShow(newValue, oldValue) {
          this.addDialogIsShow = newValue;
        }
      }
      //vue init方法 当前页面初始化就自动执行的方法 一般用于页面初始化就读取数据
      // created() {
      //   for(var favindex=0;favindex < favOptions.length;favindex++){
      //     initfavOption.push(favOptions[favindex].name);
      //   }
      // }

      }
</script>

<style scoped>

</style>
